<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="keywords" th:content="'HTML,Springboot,thymeleaf,markdown,Layui,个人博客,'+${myinfo.getWebname()}+','+${myinfo.getNickname()}"/>
    <title th:text="${myinfo.getWebname()}"></title>
    <link rel="icon" th:href="'/style/images/system/'+${myinfo.getWebicon()}">

    <!--bootstrap3-->
    <link rel="stylesheet" href="/dist/bootstrap3/css/bootstrap.min.css">
    <script src="/dist/jquery/jquery-3.4.1.min.js"></script>
    <script src="/dist/bootstrap3/js/bootstrap.min.js"></script>

    <!--font-awesome-->
    <link rel="stylesheet" href="/style/fonts/font-awesome.min.css">

    <!--layui-->
    <link rel="stylesheet" href="/dist/layui/css/layui.css" media="all">
    <script src="/dist/layui/layui.js"></script>

    <!--自定义 css-->
    <link rel="stylesheet" href="/style/css/me.css">
    <!--自定义 js-->
    <script src="/script/me.js"></script>

    <!--semantic-->
    <link rel="stylesheet" href="/dist/semantic/semantic.min.css">

    <style type="text/css"></style>
    <script language="javascript"></script>
</head>
<body>
<div>
    <!--导航-->
    <nav class="ui inverted attached navbar-fixed-top navbar-inverse m-shadow-small">
        <div class="ui container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle fa-inverse" data-toggle="collapse" data-target="#navbar-menu">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <div id="logo" class="navbar-brand navbar-logo">
                    <a href="/">
                        <img th:src="'/style/images/system/'+${myinfo.getBrandimg()}" class="img-circle" th:text="' '+${myinfo.getWebname()}">
                    </a>
                </div>
            </div>
            <div class="collapse navbar-collapse" id="navbar-menu">
                <ul class="nav navbar-nav navbar-right" data-in="fadeInDown" data-out="fadeOutUp">
                    <li class="navli"><a class="navbar-link current" href="/index">首页</a></li>
                    <li class="navli"><a class="navbar-link" href="/types">分类</a></li>
                    <li class="navli"><a class="navbar-link" href="/tags">标签</a></li>
                    <li class="navli"><a class="navbar-link" href="/archives">归档</a></li>
                    <th:block th:if="${session.userinfo} != null">
                        <li class="navli"><a href="/space" class="navbar-link">我的空间</a></li>
                    </th:block>
                    <li class="navli"><a class="navbar-link" href="/me">关于我</a></li>
                    <li class="navli"><a class="navbar-link" href="/link">友链</a></li>
                    <li class=""><a href="javascript:void(0);" title="搜索"><i class="layui-icon layui-icon-search"></i></a>
                    </li>
                    <th:block th:if="${session.userinfo} != null">
                        <th:block th:if="${session.userinfo.getType()} == 'admin'">
                            <li class=""><a href="javascript:void(0);" id="manage-btn" title="后台管理"><i class="layui-icon layui-icon-website"></i></a></li>
                        </th:block>
                        <li class="nav-wel"><label><cite>欢迎您：<a th:href="@{/userinfo/{id}(id=${session.userinfo.id})}" th:text="${session.userinfo.nickname}"></a></cite></label></li>
                        <li><a class="nav-onoff" href="javascript:void(0);" id="logout-btn"> 退出</a></li>
                    </th:block>

                    <th:block th:if="${session.userinfo} == null">
                        <li>
                            <a class="nav-onoff" href="javascript:void(0);" id="login-btn">登录</a>
                        </li>
                    </th:block>
                </ul>
            </div>
        </div>
    </nav>
    <!--导航结束-->
    <!--分隔片段-->
    <div class="nav-split"></div>
    <!--分隔片段结束-->
    <div class="m-container m-padded-large">
        <div class="ui container">
            <div class="ui stackable grid">
                <!--左侧内容-->
                <div class="four wide column" th:each="album : ${albums}">
                    <div class="ui link cards">
                        <a th:href="@{/albumimg/{aid}(aid=${album['id']})}" class="ui card" target="_blank">
                            <div class="image">
                                <img th:src="'/upload/album/cover/'+${album['cover']}" style="width: 100%;height:160px;">
                            </div>
                            <div class="content">
                                <div class="header" th:text="${album['name']}"></div>
                                <div class="description album-desc"><i class="layui-icon layui-icon-location"></i><span th:text="${album['location']}"></span></div>
                                <div class="description album-desc"><i class="layui-icon layui-icon-date"></i><span th:text="${album['time']}"></span></div>
                                <div class="description album-desc"><i class="layui-icon layui-icon-edit"></i><span th:text="${album['desc']}"></span></div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-anim layui-anim-upbit" id="layer-photos-demo">
        <div id="pageinfo" style="text-align:center"></div>
    </div>

    <!--底部内容-->
    <footer class="ui inverted vertical segment m-padded-large">
        <div class="ui center aligned container">
            <div class="ui inverted divided stackable grid">
                <div class="four wide column">
                    <div class="ui inverted link list">
                        <div class="item">
                            <img src="/style/images/system/wx.jpg" class="ui rounded image" alt="" style="width: 110px">
                        </div>
                    </div>
                </div>

                <div class="four wide column">
                    <h4 class="ui inverted header m-text-bold m-text-spaced">联系我</h4>
                    <div class="ui inverted link list">
                        <a class="item footer-contract" th:href="'mailto:'+${myinfo.getEmail()}+'?subject='+${myinfo.getWebname()}" th:text="'Email: '+${myinfo.getEmail()}"></a>
                        <a class="item footer-contract" rel="external nofollow" target="_blank" th:href="'http://wpa.qq.com/msgrd?v=3&amp;uin='+${myinfo.getQq()}+'&amp;site=qq&amp;menu=yes'" title="QQ" th:text="'QQ: '+${myinfo.getQq()}"></a>
                    </div>
                </div>
                <div class="eight wide column">
                    <h4 class="ui inverted header m-text-bold m-text-spaced">站点说明</h4>
                    <p class="m-text-thin m-text-spaced m-opacity-mini" align="">本站仅作为学习交流使用，未经许可不得用于任何商业目的。
                        <br/>本站所有内容如需转载请注明出处。
                        <br/>如有不足之处，欢迎各位对本站提出宝贵的意见。</p>
                </div>
            </div>
            <div class="ui inverted section divider"></div>
            <p class="m-text-thin m-text-spaced m-opacity-tiny" th:text="${myinfo.getRecord()}"></p>
        </div>
    </footer>
    <!--底部内容结束-->
    <!--返回顶部-->
    <div id="toolBackTop" style="right: 56.375px;" hidden>
        <a class="sider-top" href="javascript:void (0);" title="返回顶部" onclick="gotop();return false;"></a>
    </div>
    <!--返回顶部结束-->

    <script type="text/javascript">
        /*<![CDATA[*/
        var pageCount = [[${pageInfo.total}]];//数量
        var pageNum = [[${pageInfo.pageNum}]];//当前页
        var pageSize = [[${pageInfo.pageSize}]];//每页显示数量
        /*]]>*/

        layui.config({
            base: '/script/js/util/'
        }).use(['laypage','layer'],function(){
            laypage = layui.laypage,layer = layui.layer;
            laypage.render({
                elem: 'pageinfo'
                , count: pageCount             //数据总数
                , limit: pageSize                      //每页显示条数
                , curr: pageNum                        //起始页
                , groups: 5                      //连续页码个数

                //跳转页码时调用
                , jump: function (obj, first) { //obj为当前页的属性和方法，第一次加载first为true
                    //do something
                    if (!first) {
                        //非首次加载 do something
                        var page = obj.curr;
                        url= "album?pageIndex="+page;
                        window.location.href=url;
                    }
                }
            });
            layer.photos({
                photos: '#layer-photos-demo'
                ,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
                ,tab:function(pic,layero){
                    console.log(pic,layero)
                }
            });
        })
    </script>
</div>
</body>
</html>